<template>
  <div class="tui-submenu" :class="{
    'tui-submenu--active': isActive,
    'tui-submenu--open': isOpen,
    'tui-submenu--disabled': disabled,
    'tui-submenu--collapse': isCollapseVertical,
    [`tui-submenu--level-${menuContext.menuLevel.value}`]: true
  }" @mouseenter="handleMouseEnter" @contextmenu.prevent="handleContextMenu" ref="subMenuRef">
    <!-- 子菜单标题 -->
    <div class="tui-submenu__title" :class="{ 'tui-submenu__title--active': isActive }" @click.stop="handleClick">
      <span class="tui-submenu__title-content">
        <!-- 显示菜单项图标 -->
        <tui-icon v-if="props.icon" ref="iconRef" class="tui-submenu__item-icon" :icon="props.icon"
          :animationEnabled="isActive"></tui-icon>
        <span class="tui-submenu__title-text">
          <slot name="title">{{ title }}</slot>
        </span>
      </span>

      <!-- 子菜单展开/折叠图标 -->
      <tui-icon class="tui-submenu__icon" :icon="iconClass"></tui-icon>
    </div>

    <!-- 子菜单内容 - 使用Teleport处理折叠状态下的子菜单 -->
    <!-- 折叠状态下使用Teleport将子菜单渲染到body，避免被滚动容器裁剪 -->
    <!-- 无论isOpen状态如何都进行teleport，确保动画效果能够正常工作 -->
    <teleport v-if="useTeleport && isOpen" :to="props.teleportTarget || 'body'">
      <div class="tui-submenu__content" ref="contentRef" :class="[
        `tui-submenu__content--${menuContext.props.mode}`,
        { 'tui-submenu__content--open': isOpen }
      ]" :style="contentStyle">
        <slot></slot>
      </div>
    </teleport>

    <!-- 非折叠状态或不使用teleport时，正常渲染 -->
    <template v-else>
      <div class="tui-submenu__content" ref="contentRef" :class="[
        `tui-submenu__content--${menuContext.props.mode}`,
        { 'tui-submenu__content--open': isOpen }
      ]" :style="contentStyle">
        <slot></slot>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useFloating, autoUpdate, offset, flip, shift, size } from '@floating-ui/vue';
import { ref, computed, inject, provide, watch, nextTick, onMounted, onUnmounted } from 'vue';
import type { TuiSubMenuProps, TuiMenuContext } from './types';
import type { ComponentPublicInstance, } from 'vue';
import { useMenuTouchOptimization } from './useMenuTouchOptimization';

const props = withDefaults(defineProps<TuiSubMenuProps>(), {
  disabled: false,
  expandIcon: () => ({ close: 'tui:right', open: 'tui:down' }),
  collapseIcon: () => ({ close: 'tui:right', open: 'tui:down' }),
  showTimeout: undefined,
  hideTimeout: undefined,
  popperClass: '',
  teleportTarget: 'body'
});

// 注入父菜单上下文，添加默认值确保不会是undefined
const menuContext = inject<TuiMenuContext>('menuContext', {} as TuiMenuContext);
const menuLevel = ref(menuContext.menuLevel.value + 1);
const innerIndex = computed(() => [menuContext.innerIndex.value, props.index].filter(i => !!i).join('.'));
const parentMenuIndexes = computed(() => [...menuContext.parentMenuIndexes.value, menuContext.innerIndex.value].filter(i => !!i));

// 使用菜单触摸优化组合函数
const { getActualTriggerMode, shouldIgnoreMouseEvent } = useMenuTouchOptimization();

// 提供更新后的上下文给子组件，包括当前菜单的索引作为父索引
provide<TuiMenuContext>('menuContext', {
  ...menuContext,
  menuLevel,
  innerIndex,
  parentMenuIndexes,
});

// 响应式数据
const isOpen = ref(false);
const contentRef = ref<HTMLDivElement>();
const subMenuRef = ref<HTMLDivElement>();
const iconRef = ref<ComponentPublicInstance | null>(null);

// 计算是否为折叠状态的垂直菜单
const isCollapseVertical = computed(() => menuContext.props.verticalCollapse && menuContext.props.mode === 'vertical');

// 计算是否需要使用teleport
const useTeleport = computed(() => {
  if (props.teleportTarget === false) return false;
  return isCollapseVertical.value || menuContext.props.mode === 'horizontal';
});

// 使用floating-ui进行定位 - 按照官方API正确使用
const {
  floatingStyles,
  update,
} = useFloating(subMenuRef, contentRef, {
  transform: false,
  // 根据菜单模式设置不同的放置位置
  placement: menuContext.props.mode === 'horizontal' ? 'bottom-start' : 'right-start',
  // 只有在需要teleport且子菜单打开时才启用autoUpdate
  whileElementsMounted: (referenceEl, floatingEl) => {
    if (useTeleport.value && isOpen.value) {
      // 正确调用autoUpdate，添加update回调函数
      return autoUpdate(referenceEl, floatingEl, () => {
        update();
      });
    }
    return () => { };
  },
  // 使用中间件增强定位功能
  middleware: [
    // 设置偏移量
    offset({
      mainAxis: menuContext.props.mode === 'horizontal'
        ? parseInt(getComputedStyle(document.documentElement).getPropertyValue('--tui-menu-popper-offset-y') || '6')
        : parseInt(getComputedStyle(document.documentElement).getPropertyValue('--tui-menu-popper-offset-x') || '6')
    }),
    flip({
      crossAxis: true,
      fallbackPlacements: menuContext.props.mode === 'horizontal'
        ? ['top-end', 'right', 'left']
        : ['right-end', 'top', 'bottom']
    }),
    // 添加位移功能，确保子菜单与父菜单不重叠
    shift({
      crossAxis: menuContext.props.mode === 'horizontal'
    }),
    // 调整子菜单大小以适应视口
    // size({
    //   apply: ({ rects, availableWidth, availableHeight }) => {
    //     if (!contentRef.value) return;

    //     // 限制子菜单最大宽度为视口可用宽度的80%
    //     if (rects.floating.width > availableWidth * 0.8) {
    //       contentRef.value.style.maxWidth = `${availableWidth * 0.8}px`;
    //     }

    //     // 限制子菜单最大高度为视口可用高度的80%
    //     if (rects.floating.height > availableHeight * 0.8) {
    //       contentRef.value.style.maxHeight = `${availableHeight * 0.8}px`;
    //       contentRef.value.style.overflow = 'auto';
    //     }
    //   }
    // })
  ]
});

// 计算子菜单样式 - 结合floating-ui定位样式和基础样式
const contentStyle = computed(() => {
  if (!useTeleport.value || !isOpen.value) {
    return {};
  }

  return {
    ...floatingStyles.value,
    position: 'absolute',
    zIndex: '2000',
    width: '200px',
    margin: '0',
    boxSizing: 'border-box',
    backgroundColor: 'white',
    border: '1px solid #e4e7ed',
    borderRadius: '4px',
    boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
    transition: 'transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease',
    opacity: '1',
    visibility: 'visible'
  };
});

// 计算属性
const isActive = computed(() => {
  // 检查是否有子菜单项被激活
  if (props.disabled) return false;

  if (menuContext.openedMenus.value.includes(innerIndex.value)) {
    return true;
  }

  return false;
});



// 子菜单展开方向相关代码已移除，因为dropdownPlacement不再使用

const title = computed(() => {
  // 如果没有提供title插槽内容，这里可以返回默认标题
  return '子菜单';
});

const iconClass = computed(() => {
  const collapse = menuContext?.props?.verticalCollapse && menuContext?.props.mode === 'vertical';
  if (collapse) {
    return isOpen.value ? props.collapseIcon?.open : props.collapseIcon?.close;
  } else {
    return isOpen.value ? props.expandIcon?.open : props.expandIcon?.close;
  }
});



// 处理点击事件
function handleClick() {
  console.log('触发了点击事件', menuContext.menuTrigger.value)
  if (props.disabled) return;
  const actualTriggerMode = getActualTriggerMode(menuContext.menuTrigger.value);
  if (actualTriggerMode === 'click') {
    toggleMenu();
  }
}

// 处理右键菜单事件
function handleContextMenu() {
  console.log('触发了右键菜单事件')
  if (props.disabled) return;
  if (menuContext.menuTrigger.value === 'contextmenu') {
    toggleMenu();
  }
}

// 处理鼠标进入事件
function handleMouseEnter() {
  // 在移动设备上或触摸事件后短时间内忽略鼠标事件
  if (shouldIgnoreMouseEvent()) return;

  console.log('触发了鼠标进入事件', menuContext.menuTrigger.value)
  if (props.disabled) return;
  const actualTriggerMode = getActualTriggerMode(menuContext.menuTrigger.value);
  if (actualTriggerMode === 'hover') {
    toggleMenu();
  }
}

// 切换菜单状态 - 简化为仅翻转isOpen值并调用handleToggleSubMenu
function toggleMenu() {
  isOpen.value = !isOpen.value;
  menuContext?.handlers?.handleToggleSubMenu(innerIndex.value, parentMenuIndexes.value);
}

watch(
  () => menuContext.openedMenus.value,
  (newVal) => {
    isOpen.value = newVal.includes(innerIndex.value);
  },
  { immediate: true }
);

// 监听isActive变化，控制动画状态
watch(
  () => isActive.value,
  (newActive) => {
    if (!iconRef.value) return;

    if (newActive) {
      // 激活时播放动画
      (iconRef.value as any).restartAnimation?.();
    } else {
      // 非激活时停止动画
      (iconRef.value as any).stopAnimation?.();
    }
  },
  { immediate: true }
)

// 监听父菜单的默认打开项变化
watch(
  () => menuContext?.props?.defaultOpeneds,
  (newVal) => {
    if (newVal && Array.isArray(newVal)) {
      isOpen.value = newVal.includes(innerIndex.value);
    }
  },
  { immediate: true }
);

// 监听isOpen变化，调整子菜单位置并应用CSS变量
watch(
  () => isOpen.value,
  async (newVal) => {
    if (newVal && useTeleport.value) {
      // 子菜单打开时，确保位置正确并应用CSS变量
      await nextTick();

      // 应用CSS变量到子菜单元素
      if (menuContext.styles?.applyCssVars && contentRef.value) {
        menuContext.styles.applyCssVars(contentRef.value);
      }

      // 使用floating-ui更新位置
      await update();
    }
  }
);

// 监听CSS变量变化，确保子菜单始终有正确的样式
watch(
  () => menuContext.styles?.cssVars?.value,
  () => {
    if (isOpen.value && useTeleport.value && contentRef.value) {
      menuContext.styles?.applyCssVars(contentRef.value);
    }
  },
  { deep: true }
);

// 监听菜单模式和折叠状态变化，重新计算位置
watch(
  [() => menuContext.props.mode, isCollapseVertical],
  async () => {
    if (isOpen.value && useTeleport.value) {
      await nextTick();
      await update();
    }
  }
);

// 组件挂载后，如果子菜单已打开，应用CSS变量并更新位置
onMounted(async () => {
  if (isOpen.value && useTeleport.value) {
    await nextTick();
    if (menuContext.styles?.applyCssVars && contentRef.value) {
      menuContext.styles.applyCssVars(contentRef.value);
    }
    await update();
  }
});

// 组件卸载时清理资源
onUnmounted(() => {
  // floating-ui会自动清理autoUpdate
});


</script>

<style lang="scss" scoped>
// 子菜单样式 - 按照水平和垂直菜单分类组织
.tui-submenu {
  position: relative;
  background-color: var(--tui-menu-background-color);
  color: var(--tui-menu-text-color);

  // 通用样式
  &__title {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    cursor: pointer;
    user-select: none;
    position: relative;
    justify-content: space-between;

    &:hover:not(.tui-submenu--disabled) {
      background-color: var(--tui-menu-hover-background-color);
    }
  }

  &__title-content {
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    font-size: 16px;
  }

  &__content {
    width: auto;
    background-color: var(--tui-menu-background-color);
    box-shadow: var(--tui-box-shadow-light);
  }

  &--active {
    >.tui-submenu__title {
      color: var(--tui-menu-active-text-color);
      background-color: var(--tui-menu-hover-background-color);
      // 添加左侧竖条效果
      border-left: 3px solid var(--tui-menu-active-text-color);
      padding-left: 17px; // 调整内边距以保持内容位置一致
    }
  }

  &__title--active {
    color: var(--tui-menu-active-text-color);
    background-color: var(--tui-menu-hover-background-color);
    // 添加左侧竖条效果
    border-left: 3px solid var(--tui-menu-active-text-color);
    padding-left: 17px; // 调整内边距以保持内容位置一致
  }

  // 水平菜单样式
  .tui-submenu__content--horizontal {

    // 一级水平子菜单
    &.tui-submenu__content--horizontal {
      position: absolute;
      left: 0;
      top: 100%;
      min-width: 100%;
      background-color: white;
      box-shadow: var(--tui-box-shadow-light);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(0);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;

      &.tui-submenu__content--open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(calc(var(--tui-menu-popper-offset-y, 6px)));
      }

      // 嵌套的水平子菜单（向右展开）
      .tui-submenu &.tui-submenu__content--horizontal {
        left: 100%;
        top: 0;
        transform: translateX(0);
      }

      .tui-submenu &.tui-submenu__content--horizontal.tui-submenu__content--open {
        transform: translateX(calc(var(--tui-menu-popper-offset-x, 6px)));
      }

      // 折叠状态下的水平菜单文字和图标样式
      .tui-submenu--collapse & {
        .tui-submenu__title-content {
          opacity: 1;
          width: auto;
          overflow: hidden;
        }

        .tui-submenu__icon {
          opacity: 1;
          margin-left: 0;
          overflow: hidden;
        }
      }
    }

    // 二级水平子菜单（嵌套菜单）
    .tui-submenu &.tui-submenu__content--horizontal {
      left: 100%;
      top: 0;
      min-width: 100%;
    }
  }

  // 垂直菜单样式
  .tui-submenu__content--vertical {



    // 正常状态的垂直子菜单 - 使用高度变化实现折叠效果
    &:not(.tui-submenu--collapse .tui-submenu__content--vertical) {
      position: static;
      margin-left: 20px;
      box-shadow: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;

      // 垂直子菜单打开状态
      &.tui-submenu__content--open {
        max-height: 1000px;
      }
    }

    // 折叠状态下的垂直菜单文字和图标样式
    .tui-submenu--collapse & {
      .tui-submenu__title-content {
        opacity: 0;
        width: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, width 0.3s ease;
      }

      .tui-submenu__icon {
        opacity: 0;
        width: 0;
        margin-left: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, width 0.3s ease;
      }
    }
  }

  // 折叠状态的菜单样式
  &--collapse {

    & .tui-submenu__item-icon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }

    // 折叠状态下的垂直子菜单展开效果
    & .tui-submenu__content--vertical {
      position: absolute;
      // 默认向右展开
      left: 100%;
      top: 0;
      min-width: 200px;
      margin-left: 0;
      background-color: white; // 确保有背景色
      box-shadow: var(--tui-box-shadow-light);
      z-index: 2000; // 显著提高z-index值，确保子菜单显示在所有内容上方
      overflow: visible;
      max-height: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(0);
      transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;

      // 当通过Teleport渲染到body时的特殊样式
      &[style*="position: absolute"] {
        // 确保位置正确
        width: 200px;
        margin: 0;
        min-width: auto;
        // 明确设置所有必要样式
        background-color: white !important;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }

      // 折叠状态下的打开子菜单样式
      &.tui-submenu__content--open {
        opacity: 1 !important; // 强制设置不透明
        max-height: none;
        overflow: visible;
        visibility: visible !important; // 强制设置可见
        pointer-events: auto;
        transform: translateX(calc(var(--tui-menu-popper-offset-x, 6px)));
        z-index: 2000 !important; // 确保打开时z-index正确

        // 确保在打开状态下文字和图标完全显示
        .tui-submenu__title-content {
          opacity: 1;
          width: auto;
          height: auto;
          overflow: visible;
        }

        .tui-submenu__icon {
          opacity: 1;
          width: auto;
          height: auto;
          overflow: visible;
        }
      }


    }
  }
}

// 折叠菜单的样式
.tui-menu {
  &--collapse {
    >.tui-submenu {
      >.tui-submenu__title {
        >.tui-submenu__title-content {
          >.tui-submenu-item-icon {
            visibility: visible;
          }

          >.tui-submenu__title-text {
            opacity: 0;
            width: 0;
            transition: opacity var(--tui-transition-duration) ease 0s,
              width var(--tui-transition-duration) ease 0s,
              transform var(--tui-transition-duration) ease 0s;
            transform: translateX(-10px);
          }
        }
      }
    }
  }
}

/* 为非折叠状态添加过渡效果 */
.tui-menu--vertical:not(.tui-menu--collapse) {
  >.tui-submenu {
    >.tui-submenu__title {
      >.tui-submenu__title-content {
        >.tui-submenu__title-text {
          opacity: 1;
          width: auto;
          overflow-x: hidden;
          transform: translateX(0);
          transition: opacity var(--tui-transition-duration) ease var(--tui-transition-delay),
            width var(--tui-transition-duration) ease 0s,
            transform var(--tui-transition-duration) ease var(--tui-transition-delay);
        }
      }
    }
  }
}
</style>